<template>
  <div class="fullscreen-content" @click="toggle">
    <Icon
      width="24px"
      :icon="
        isFullscreen
          ? 'material-symbols:fullscreen-exit'
          : 'material-symbols:fullscreen'
      "
    />
  </div>
</template>

<script setup lang="ts">
// import { ref, watch } from "vue";
import { useFullscreen } from "@vueuse/core";
// import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
// import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
// import { RefreshRight } from "@element-plus/icons-vue";
import { Icon } from "@iconify/vue";

const { isFullscreen, toggle } = useFullscreen();
</script>

<style scoped>
.fullscreen-content {
  width: 40px;
  height: 100%;
  margin-right: 10px;
  /* background-color: #f0f0f0; */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  icon {
    font-weight: 600;
    width: 52px;
    height: 52px;
  }
}
.fullscreen-content:hover {
  background-color: var(--el-color-primary-light-9);
}
</style>
